<template>
  <div class="box">
    <h1>slot</h1>
    <v-one>
      <!-- 组件嵌套的内容无法显示，会自动显示组件对应内容
                如果非要显示，可以slot实现
      -->
      <ul>
        <li>黄河之水天上来</li>
        <li>奔流到海不复回</li>
      </ul>
    </v-one>

    <v-one>
      <!-- 组件嵌套的内容无法显示，会自动显示组件对应内容
                如果非要显示，可以slot实现
      -->
      <p>哈哈哈哈哈哈哈</p>
    </v-one>
    <!-- 没有嵌套内容就不会显示，不会有任意影响 -->
    <v-one></v-one>

    <v-two>
      <!-- 具名插槽，给插槽指定一个名字,嵌套内容如果不知道插槽，则不显示 -->
      <ul slot="one">
        <li>黄河之水天上来</li>
        <li>奔流到海不复回</li>
      </ul>
      <ol slot="two">
        <li>我是医师周</li>
      </ol>
    </v-two>

    <v-three :arr="arr">
        <!-- v-slot：vue2.x  vue3.x -->
        <template v-slot="props">
           <ul>
                <li v-for="item in props.data" :key="item.id">{{ item.msg }}</li>
           </ul>
        </template>
    </v-three>

    <v-three :arr="arr2">
        <!-- slot-scope接收 vue2.x  -->
        <template slot-scope="props">
            <div>
                <button v-for="item in props.data" :key="item.id">{{ item.msg }}</button>
            </div>
        </template>
    </v-three>
  </div>
</template>

<script>
import vOne from "./vOne.vue";
import vTwo from "./vTwo.vue";
import vThree from "./vThree.vue";
export default {
  components: {
    vOne,
    vTwo,
    vThree
  },
  data() {
    return {
      arr: [
        { id: 1, msg: "速度与激情10" },
        { id: 2, msg: "变形金刚" },
        { id: 3, msg: "光头强" }
      ],
      arr2: [
        { id: 1, msg: "螺蛳粉" },
        { id: 2, msg: "孙怀宇" },
        { id: 3, msg: "冰淇淋" }
      ],
    };
  }
};
</script>

<style>
</style>